<template>
  <div>
    <el-descriptions
      v-if="descriptionData&&periodDict"
      class="margin-top"
      :column="2"
      border
      style="margin-bottom: 1rem;"
    >
      <template v-if="isEditFlag" slot="extra">
        <el-button plain size="small" @click="handleAddReward()">添加类型</el-button>
        <el-button plain size="small" @click="handleEditReward()">编辑</el-button>
        <el-button type="danger" size="small" @click="handleDeleteReward()">删除</el-button>
      </template>
      <el-descriptions-item>
        <template slot="label">应用单位</template>
        <CompanyFormItem :id="descriptionData.companyCode" />
      </el-descriptions-item>
      <el-descriptions-item label="周期">{{ periodDict[descriptionData.period].alias }}</el-descriptions-item>
      <el-descriptions-item label="启用时间">{{ descriptionData.startTime }}</el-descriptions-item>
      <el-descriptions-item label="失效时间">{{ descriptionData.endTime }}</el-descriptions-item>
      <el-descriptions-item label="描述">{{ descriptionData.description }}</el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
export default {
  name: 'RewardDescription',
  components: {
    CompanyFormItem: () => import('@/components/Company/CompanyFormItem')
  },
  props: {
    data: { type: Object, default: null },
    isEdit: { type: Boolean, default: true }
  },
  data: () => ({
    descriptionData: null,
    isEditFlag: true
  }),
  computed: {
    periodDict() {
      return this.$store.state.party.RankTypeDict
    }
  },
  watch: {
    data: {
      handler(val) {
        if (val) this.descriptionData = val
      },
      immediate: true,
      deep: true
    },
    isEdit: {
      handler(val) {
        this.isEditFlag = val
      },
      immediate: true
    }
  },
  methods: {
    handleEditReward() {
      this.$emit('handleEditReward', this.descriptionData)
    },
    handleAddReward() {
      this.$emit('handleAddReward', this.descriptionData)
    },
    handleDeleteReward() {
      this.$emit('handleDeleteReward', this.descriptionData)
    }
  }
}
</script>
